<template>
    <component is="a-modal" v-model:visible="visible" width="80%" :title="title" :mask-closable="false"
        :ok-loading="loading" @cancel="close" @before-ok="submit">
        <a-descriptions title="用户信息" bordered :column="4" >
            <a-descriptions-item label="ID" :span="1">{{ paramsData.id }}</a-descriptions-item>
            <a-descriptions-item label="UID" :span="1">{{ paramsData.user_id }}</a-descriptions-item>
            <a-descriptions-item label="会员账号" :span="1">{{ paramsData?.user?paramsData?.user?.user_name:'' }}</a-descriptions-item>
            <a-descriptions-item label="公司名称" :span="1">{{ paramsData.company_name }}</a-descriptions-item>

            <a-descriptions-item label="法人姓名" :span="1">{{ paramsData.company_fuzeren }}</a-descriptions-item>
            <a-descriptions-item label="统一税务编号" :span="1">{{ paramsData.company_number }}</a-descriptions-item>
            <a-descriptions-item label="银行名称" :span="1">{{ paramsData.bank }}</a-descriptions-item>
            <a-descriptions-item label="支行名称" :span="1">{{ paramsData.sub_bank_name }}</a-descriptions-item>

            <a-descriptions-item label="银行卡号" :span="1">{{ paramsData.bank_number }}</a-descriptions-item>
            <a-descriptions-item label="提现金额" :span="1">{{ paramsData.get_num }}{{ ( paramsData.get_num_real)+'RMB' }}</a-descriptions-item>
            <a-descriptions-item label="发票类型" :span="1">{{ paramsData.bank }}</a-descriptions-item>
            <a-descriptions-item label="申请时间" :span="1">{{ paramsData.sub_bank_name }}</a-descriptions-item>

            <a-descriptions-item label="发票编号" :span="1">{{ paramsData.invoice_code }}</a-descriptions-item>
            <a-descriptions-item label="发票图片" :span="1" v-if="paramsData.type==1">
                <a-image :src="paramsData.image" :width="100" :height="100" />
            </a-descriptions-item>
            <a-descriptions-item label="物流公司" :span="1" v-if="paramsData.type!=1">{{ paramsData.express_name }}</a-descriptions-item>
            <a-descriptions-item label="物流单号" :span="1" v-if="paramsData.type!=1">{{ paramsData.express_code }}</a-descriptions-item>

        </a-descriptions>
        <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true" style="margin-top: 30px;">
            <div v-if="mode == 'check'">
                <a-form-item label="审核操作" field="state">
                    <sa-radio @change="getChange" v-model="formData.state" :data="STATE"></sa-radio>
                </a-form-item>
                <a-form-item v-if="formData.state ==2" label="审核备注" field="remake_id">
                    <sa-radio  v-model="formData.remake_id" :data="paramsData.remake_list" :fieldNames="{ value: 'value', label:'title'}"></sa-radio>
                </a-form-item>
                <a-form-item v-if="formData.state ==1" label="支付金额(RMB)" field="pay_num">
                    <a-input-number hide-button v-model="formData.pay_num" placeholder="请输入" />
                </a-form-item>
                <a-form-item v-if="formData.remake_id ==-1" label="备注" field="message">
                    <a-input v-model="formData.message" placeholder="请输入" />
                </a-form-item>
                <a-form-item label="操作密码" field="admin_pay_password">
                    <a-input-password v-model="formData.admin_pay_password" placeholder="请输入" />
                </a-form-item>
                <a-form-item label="谷歌验证码" field="google_code">
                    <a-input v-model="formData.google_code" placeholder="请输入" />
                </a-form-item>
            </div>
        </a-form>
    </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import SaRadio from '@cps/sa-radio/index.vue'
import memberApi from '@/api/system/member'
import ENUMS from '@/utils/enums'
import { throttle } from 'lodash'
import tool from '@/utils/tool'
const paramsData = ref({})
// 获取角色组列表
const getParams = async () => {
    const { data } = await memberApi.member_ticket_check_info(formData.id)
    paramsData.value = { ...data.info }
    paramsData.value.remake_list = tool.simpleTransformArray(data.remake_list)
    paramsData.value.remake_list.push({value:-1,title:'其他'})
    console.log('1', paramsData.value);
}
const emit = defineEmits(['success'])
// 引用定义
const formRef = ref()
const mode = ref('')
const visible = ref(false)
const loading = ref(false)

let title = computed(() => {
    return (mode.value == 'detail' ? '详情' : '审核')
})
const STATE = [
    { value: 0, title: '待审核' },
    { value: 1, title: '通过审核(已转帐给对方)' },
    { value: 2, title: '不通过审核(退回积分)' },
]
// 表单信息
const formData = reactive({
    state: 0,
    remake_id: '',
    admin_pay_password: '',
    message:'',
    google_code: '',
    pay_num:'',
    id: ''
})

// 验证规则
const rules = ref({
    admin_pay_password: [{ required: true, message: '请输入' }],
    google_code: [{ required: true, message: '请输入' }],
    pay_state: [{ required: true, message: '请选择' }],
    pay_num: [{ required: true, message: '请选择' }],
    message: [{ required: true, message: '请输入' }],

});
// 打开弹框
const open = async (type, data) => {
    paramsData.value = {}
    mode.value = type
    visible.value = true
    formRef.value.resetFields()
    formData.id = data.id
    await initPage()
    await getParams()

}
const getChange = () => {
    formData.return_cost = null
}

// 初始化页面数据
const initPage = async () => {
}

// 数据保存
const submit = throttle(async (done) => {
    if (mode.value == 'check') {
        const validate = await formRef.value?.validate()
        if (!validate) {
            loading.value = true
            try {
                let data = { ...formData }
                let result = await memberApi.member_ticket_check(data)
                if (result.code === 200) {
                    Message.success('操作成功')
                    emit('success')
                    visible.value = false
                    done(true)
                }
                // 防止连续点击提交
                setTimeout(() => {
                    loading.value = false
                }, 500)
            } catch {
                loading.value = false
            }
        }
        done(false)
    } else {
        done(true)
    }
}, 100)

// 关闭弹窗
const close = () => (visible.value = false)

defineExpose({ open })
</script>
<style lang="less" scoped>
.photoList {
    width: 100%;
    max-height: 200px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: center;

    .photo {
        width: 180px;
        height: 180px;
        text-align: center;
        color: #5c7cfa;
        border: 1px solid #d9d9d9;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border-radius: 4px;
        margin-right: 100px;

        .img {
            margin-top: 15px;
            cursor: pointer;
            width:100px;
            height: 140px;
        }
    }
}
</style>
